<template>
    <el-container class="content">
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <breadcrumb :title="'探视管理'" :noBack="true"></breadcrumb>
                    <div class="toolbar">
                        <div>
                            <el-input v-model="name" placeholder="请输入姓名、手机号" class="input"
                                      clearable></el-input>
                            <!--                            <el-cascader-->
                            <!--                                v-model="ward"-->
                            <!--                                ref="floor" clearable-->
                            <!--                                :separator="' '"-->
                            <!--                                :show-all-levels="false"-->
                            <!--                                @change="changeFloor"-->
                            <!--                                :props="{label:'name',value:'treeId',children:'children'}"-->
                            <!--                                :options="floorInfo">-->
                            <!--                            </el-cascader>-->
                            <el-date-picker
                                class="searchTime"
                                v-model="searchTime"
                                type="daterange"
                                :editable="false"
                                unlink-panels
                                start-placeholder="探视开始时间"
                                end-placeholder="探视结束时间"
                                range-separator="-">
                            </el-date-picker>
                            <el-button type="primary" @click="getList(1)">查询</el-button>
                        </div>
                        <div class="text-right">
                            <el-button @click="dataExport()">导出</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example ref="table" :data="tableData" :tableColumn="header" :height="'100%'"
                                   :slotColumns="slotColumns">
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import breadcrumb from '../components/breadcrumb'

    export default {
        data() {
            return {
                name: '', // 姓名
                searchTime: '',
                ward: [], // 病区
                tableData: [],
                header: [
                    {
                        prop: 'sickbedNumber',
                        label: '床位号',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'patientName',
                        label: '患者姓名',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'visitName',
                        label: '探视人',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'visitPhone',
                        label: '探视人手机号',
                        minWidth: '120',
                        align: 'center'
                    },
                    {
                        prop: 'visitTime',
                        label: '探视时间',
                        align: 'center',
                        minWidth: '150'
                    },
                    {
                        prop: 'startTime',
                        label: '到院时间',
                        align: 'center',
                        minWidth: '150'
                    },
                    {
                        prop: 'endTime',
                        label: '离院时间',
                        align: 'center',
                        minWidth: '150'
                    }
                ],
                slotColumns: [],
                page: {},
                index: 1,
                loading: false,
                floorInfo: []
            }
        },
        mounted() {
            // this.searchTime = this.$filter.timeFormat(null, 'YYYY-MM-DD HH:mm:ss')
            this.getFloorInfo()
            this.getList()
        },
        methods: {
            getFloorInfo(index) {
                this.loading = true
                this.$http.get('/patient/getTree?type=3').then(result => {
                    this.loading = false
                    if (result.success) {
                        this.floorInfo = result.data
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            changeFloor(val) {
                console.log(this.$refs['floor'].getCheckedNodes(true))
            },
            // 获取列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/visit/visitPageQuery', {
                    start: (this.searchTime && this.searchTime.length) ? this.$filter.timeFormat(this.searchTime[0], 'YYYY-MM-DD') : '',
                    end: (this.searchTime && this.searchTime.length) ? this.$filter.timeFormat(this.searchTime[1], 'YYYY-MM-DD') : '',
                    message: this.name,
                    areaId: (this.ward && this.ward.length) ? this.$refs['floor'].getCheckedNodes(true)[0].data.id : '',
                    current: this.index || 1,
                    size: 15
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 导出表格
            dataExport() {
                let params = {
                    start: (this.searchTime && this.searchTime.length) ? this.$filter.timeFormat(this.searchTime[0], 'YYYY-MM-DD') : '',
                    end: (this.searchTime && this.searchTime.length) ? this.$filter.timeFormat(this.searchTime[1], 'YYYY-MM-DD') : '',
                    message: this.name,
                    areaId: (this.ward && this.ward.length) ? this.$refs['floor'].getCheckedNodes(true)[0].data.id : ''
                }
                window.open(location.origin + this.$filter.appendUrlParams('/_api/visit/excelExport', params), '_blank')
            }
        },
        components: {
            tableExample,
            page,
            breadcrumb
        }
    }
</script>

<style scoped lang="less">
    .toolbar {
        .searchTime {
            width: 280px;
        }
    }
</style>
